<style>
.zui_upload_img{
	width: 160px;
	background: #fff;
	padding-bottom: 10px;
}
.zui_upload_img .media-wrapper{
    width: 100%;
    height: 160px;
	display: flex;
    flex-direction: column;
    justify-content: center; 
}
.zui_upload_img .media-wrapper img{
	height:auto;
}
</style>
<h2>单图上传</h2>
<div class="col-sm-3">
	<div class="card zui_upload_img" id="upload1" path="">
	    <span class="media-wrapper"><img src=""></span>
	    <div class="uploader-message text-center"><div class="content"></div></div>
	    <div class="uploader-files file-list hidden"></div>
	    <span class="card-heading">身份证正面</span>
	    <span class="card-actions">
	        <a class="btn btn-danger  btn-mini uploader-btn-delete">清空</a>
	        <a class="btn btn-primary btn-mini uploader-btn-browse">上传</a>
	    </span> 
	</div>
</div>
<div class="col-sm-3">
	<div class="card zui_upload_img" id="upload2" path="">
	    <span class="media-wrapper"><img src=""></span>
	    <div class="uploader-message text-center"><div class="content"></div></div>
	    <div class="uploader-files file-list hidden"></div>
	    <span class="card-heading">身份证正面</span>
	    <span class="card-actions">
	        <a class="btn btn-danger  btn-mini uploader-btn-delete">清空</a>
	        <a class="btn btn-primary btn-mini uploader-btn-browse">上传</a>
	    </span> 
	</div>
</div>

<div class="clearfix"></div>

<h2>组队上传</h2>
<div class="uploader" id="uploads" path="">
    <div class="uploader-message text-center"><div class="content"></div></div>
    <div class="uploader-files file-list"></div>
    <button type="button" class="btn btn-default uploader-btn-browse">添加其他证件</button>
</div>

<div class="btn btn-danger" id="reset">重置</div>
<div class="btn btn-danger" id="destroy">销毁(含重置)</div>
<div class="btn btn-primary" id="create">实例</div>
<div class="btn btn-primary" id="submit">提交</div>
<script>
$(function(){

	//变量声明
	var list= [{"url": "./remote/Upload/test_upload.jpg","name":"1.jpg","type":"image/jpeg"},{"url": "./remote/Upload/test_upload.jpg","name":"1.jpg","type":"image/jpeg"}];
	var upload1 = $("#upload1");
	var upload2 = $("#upload2");
	var uploads = $("#uploads");

	//单图上传
    zui_upload_img({upid:"upload1",list:list});
    zui_upload_img({upid:"upload2",list:list});

    //组队上传
    zui_upload_group({upid:"uploads",type:"img"});

    //上传重置
    $("#reset").click(function(){
    	zui_upload_reset([upload1,upload2,uploads])
    });
 
 	//上传销毁 (typeof upload_obj!="undefined")
 	$("#destroy").click(function(){ 
 		zui_upload_destroy([upload1_obj,upload2_obj,uploads_obj]);
 	});

 	//上传实例
 	$("#create").click(function(){
		window.upload1_obj = zui_upload_img({upid:"upload1",list:list});
		window.upload2_obj = zui_upload_img({upid:"upload2",list:list});
 		window.uploads_obj = zui_upload_group({upid:"uploads",type:"img",list:list});
 	});

     //上传提交
    $("#submit").click(function(){
    	var data = {
    		pic1 : $("#upload1").attr("path"),
    		pic2 : $("#upload2").attr("path"),
    		pics : $("#uploads").attr("path"),
    	}
    	console.log(data);
    });
 	
});

//上传相关----------------------------------------------------------------------------------
/* zui_upload_img() 单图上传
 * @param   object  参数对象
 */
function zui_upload_img(object){
    //参数接收
    var upid = object.upid;                                             //上传ID
    var maxSize = object.maxSize || "1mb";                              //大小限制
    var staticFiles = object.list || [];                                //数据读取
    //上传DOM
    var updom = $("#"+upid);
    //数据赋值
    if( staticFiles && staticFiles!="" ){
        updom.attr("path",staticFiles[0].url);
        updom.find("img").attr("src", FILE_PATH + staticFiles[0].url);
    }
    //上传实例
    var upobj = updom.uploader ({
        url                 : API.common_upload,                        //上传路径
        fileList            : "grid",                                   //列表形式
        autoUpload          : true,                                     //自动上传
        limitFilesCount     : 1,                                        //个数限制
        filters             : {                                         //文件过滤
            mime_types         : [{title:"图片",extensions:"jpg,png"}], //类型限定
            max_file_size      : maxSize,                               //大小限定
            prevent_duplicates : true                                   //重传禁止
        },
        responseHandler     : function(res,file){                       //远程响应
            var data = um_json(res.response);
            updom.attr("path",data.file);
            updom.find("img").attr("src", FILE_PATH + data.file);
        },
        staticFiles         : staticFiles,                              //静态文件
        deleteActionOnDone  : function(file,doRemoveFile){              //远程删除
            doRemoveFile();                                             //本地删除
            updom.attr("path","");
            updom.find("img").attr("src","");
        }
    });
    return upobj;                                                       //实例对象
}

/* zui_upload_group() 组队上传
 * @param     object  参数对象
 */
function zui_upload_group(object){
    //参数接收
    var upid = object.upid;                                             //上传ID
    var mode = object.mode || "large";                                  //列表形式
    var type = object.type || "";                                       //格式限制
    var maxSize = object.maxSize || "1mb";                              //大小限制
    var count = object.count || 50;                                     //个数限制
    var staticFiles = object.list || [];                                //数据读取
    //上传DOM
    var updom = $("#"+upid);
    //数据赋值
    if( staticFiles && staticFiles!="" ){
        var staticFiles_result = "";
        for(var i=0;i<staticFiles.length;i++){
            staticFiles_result+=staticFiles[i].url+",";
        }
        staticFiles_result = staticFiles_result.substr(0,staticFiles_result.length-1);
        updom.attr("path",staticFiles_result);
        for(var i=0;i<staticFiles.length;i++){
            staticFiles[i].url = FILE_PATH + staticFiles[i].url
        }
    }
    //类型设定
    var mime_types = [];
    if( type=="img" ){
        mime_types = [{title:"图片",extensions:"jpg,png"}]
    }
    //上传实例
    var upobj = updom.uploader ({
        url                 : API.common_upload,                        //上传路径
        fileList            : mode,                                     //列表形式
        previewImageIcon    : true ,                                    //图片预览
        autoUpload          : true,                                     //自动上传
        limitFilesCount     : count,                                    //个数限制
        filters             : {                                         //文件过滤
            mime_types         : mime_types,                            //类型限定
            max_file_size      : maxSize,                               //大小限定
            prevent_duplicates : true                                   //重传禁止
        },
        responseHandler     : function(res,file){                       //远程响应
            var data = um_json(res.response);

            var upload_result = updom.attr("path");
            upload_result = upload_result+","+data.file;
            if( upload_result.charAt(0)=="," ){
                upload_result = upload_result.substring(1);
            }
            updom.attr("path",upload_result);
        },
        staticFiles         : staticFiles,                              //静态文件
        deleteActionOnDone  : function(file,doRemoveFile){              //远程删除
            doRemoveFile();                                             //本地删除
            var pathArr = updom.attr("path").split(",");                //字符串转数组
            pathArr.splice($.inArray(file.url,pathArr),1);              //据值移除元素
            updom.attr("path",pathArr);                                 //结果赋值
        }
    });
    return upobj;                                                       //实例对象
}

//上传重置(单图上传)
$(function(){
    $(document).on("click",".zui_upload_img .uploader-btn-delete",function(){
        zui_upload_reset([$(this).parents(".zui_upload_img")])
    });
});

/* zui_upload_reset() 上传重置
 * @param updom array 上传DOM
 */
function zui_upload_reset(updom){
    $(".uploader-message").hide();
    if( updom instanceof Array ){
        for(var i=0;i<updom.length;i++){
            updom[i].find(".btn-delete-file").trigger("click");
        }
    }
}

/* zui_upload_destroy() 上传销毁(含重置)
 * @param upobj array   上传对象
 */
function zui_upload_destroy(upobj){
    $(".uploader-message").hide();
    if( upobj instanceof Array ){
        for(var i=0;i<upobj.length;i++){
            $(upobj[i].selector).find(".btn-delete-file").trigger("click");
            if( upobj[i].data("zui.uploader")!=null ) {
                upobj[i].data("zui.uploader").destroy();
            }
        }
    }
}
</script>